<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>商城购物车</title>
    <link rel="stylesheet" type="text/css" href="${basePath}/public/css/common.css">
    <script type="text/javascript" src="${basePath }/public/js/jquery.min.js"></script>
    <script type="text/javascript">

        function button() {
            var  goodsId = $(".goodsId").val();
            if (goodsId==null){
                alert("请添加商品")
            } else {
                window.location.href='${basePath}/home/cart/toWriteorder';
            }

        }

        function modif(obj,id) {

            var price=$(obj).parent().parent().parent().find(".unitPrice:eq(0)").text();
            var number=$(obj).parent().parent().parent().find(".totalNum:eq(0)").val();
            $(obj).parent().parent().parent().find(".totalPrice:eq(0)").text(price*number);
            console.info(price*number);

            var totalNum=$(".totalNum");
            var unitPrice=$(".unitPrice");
            var totalPrice=0;
            var num=0;
            for (var i = 0; i < $(".totalNum").length; i++) {
                totalPrice+= totalNum[i].value*unitPrice[i].innerText;
                if(totalNum[i].value>0){
                    num++;
                }
            }
            console.info(num);
            $("#totalAmount").text(totalPrice);
            $("#totalQuantity").text(num);

            $.ajax({
                url:"${basePath}/home/cart/addGoodsNum",
                type:"post",
                data:{
                    number:number,
                    id:id,
                },
                success:function (result) {
                    if (result.status==1){
                        window.location.href="${basePath}/home/cart"
                    }else {
                        alert("增加失败")
                    }
                }
            })
        }

          $(function () {
              var goodsId = $(".goodsId");
              var btns=$('.button1')

                for(var i=0;i<btns.length;i++){
                    btns[i].index=i
                    btns[i].onclick=function (ev) {
                        var id=goodsId[this.index].value;
                        $.ajax({
                            url:"${basePath}/home/cart",
                            type:"post",
                            data:{
                                id:id,
                                _method: 'DELETE'
                            },
                            success:function (result) {
                                if (result.status==1){
                                    window.location.href="${basePath}/home/cart"
                                }else {
                                    alert("删除失败")
                                }
                            }
                        })
                    }
                }
          })
        function select() {
            var name = $("#a").val();
            window.location.href="${basePath}/home/homepage/like?name="+name;
        }

    </script>
</head>
<body>
<div class="top-header">
    <div class="section">
        <div class="top-header-left f-left">
            <a href="#">LOGO</a>
        </div>
        <div class="top-header-right f-right">
            <c:choose>
                <c:when test="${empty user}">
                    <a href="${basePath}/home/vipUser/toLogin">登录</a>
                    <a href="${basePath}/home/vipUser/toRegisterVip">注册</a>
                    <a href="${basePath}/admin/adminUser/toLogin">后台</a>
                </c:when>
                <c:otherwise>
                    <a href="#">欢迎你!<W style="color: bisque;font-weight: bold; font-family: 微软雅黑; font-size: 20px;">${user.username}</W></a>
                    <a href="${basePath}/admin/adminUser/toLogin">后台</a>
                    <a href="${basePath}/home/vipUser/write">注销</a>
                </c:otherwise>
            </c:choose>
        </div>
    </div>
</div>

<div class="section nav-header">
    <ul class="nav-menus f-left">
        <li><a href="${basePath}/home/homepage/index">首页</a></li>
        <li ><a href="${basePath}/home/homepage/toProductList"  >产品列表</a></li>
        <li><a href="${basePath}/home/cart" class="active">购物车</a></li>
        <li><a href="${basePath}/home/vipUser/index" >会员中心</a></li>
        <li><a href="${basePath}/home/News/toNews">新闻资讯</a></li>
        <li><a href="${basePath}/home/pay/contact">联系我们</a></li>
    </ul>
    <div class="f-right nav-right">
        <input type="text" class="seacher-input f-left" placeholder="输入关键字">
        <a class="seacher-but  f-left" onclick="select()">搜索</a>
    </div>
</div>

<div class="section">
    <div class="cart-head">
        <h2>我的购物车</h2>
        <div class="cart-setp">
            <ul>
                <li class="first active">
                    <div class="progress">
                        <span>1</span>
                        放进购物车
                    </div>
                </li>
                <li>
                    <div class="progress">
                        <span>2</span>
                        填写订单信息
                    </div>
                </li>
                <li class="last">
                    <div class="progress">
                        <span>3</span>
                        支付/确认订单
                    </div>
                </li>
            </ul>
        </div>
    </div>

</div>


<div class="section">

    <table width="100%" align="center" class="cart-table" border="0" cellspacing="0" cellpadding="8">
        <tbody>
        <tr>
            <th align="left" colspan="2">商品信息</th>
            <th width="84" align="left">单价</th>
            <th width="104" align="center">数量</th>
            <th width="104" align="left">金额(元)</th>
            <th width="54" align="center">操作</th>
        </tr>

        <c:forEach items="${list}" var="m">
        <tr>
            <td width="68">
                <a target="_blank" href="/goods/show-97.html">
                    <img src="${basePath}/public/images${m.goodsImg}" class="img">
                </a>
            </td>
            <td>
                <a target="_blank" href="/goods/show-97.html">${m.goodsName}</a>
                <p class="stxt"></p>
            </td>
            <td class="unitPrice">
                ${m.sellPrice}
            </td>
            <td align="center">
                <div class="buy-box">
                   <input type="number" class="input totalNum" value="${m.goNum}" style="border: solid 1px #666;" min="0" max="" onblur="modif(this);" onchange="modif(this,${m.id});">
                </div>
            </td>
            <td>
                <span class="red">
                    ￥<label name="amountCount" class="totalPrice">${m.sellPrice}</label>
                </span>
            </td>
            <td align="center">
                <input type="hidden" value="${m.id}" class="goodsId">
                <input type="button" value="删除" class="button1">
            </td>
        </tr>
        </c:forEach>

        <tr>
            <th align="right" colspan="6">
                已选择商品 <b class="red" id="totalQuantity">${fn:length(list)}</b>件 &nbsp;&nbsp;&nbsp;
                商品总金额（不含运费）：<span class="red">￥</span><b class="red" id="totalAmount">${totalPrice}</b>元
            </th>
        </tr>

        </tbody>
    </table>

</div>

<div class="cart-foot section">
    <div class="right-box">
        <button class="button" onclick="javascript:location.href='${basePath}/home/homepage/index';">继续购物</button>
        <button class="button" onclick="button()">立即结算</button>
    </div>
</div>
</body>
</html>